<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         *  一、逻辑题
         *  1.合力有520员工，其中400名做项日开发，100名做产品开发，60名既做产品又做项目开发 同既不做产島又不做项目员工多名
         *      80
         *  2.有7克、2克砝码各一个，天平ー只、如何只用这这些物品三次将140克的糖分成50、90克各一份？
         *      把140克糖分成两等份，每份70克。
         *      把天平一边放上2+7克砝码，另一边放糖，这样就得到9克和61克分开的糖。
         *      将9克糖和2克砝码放在天平一边，另一边放糖，这样就得到11克和50克。于是50和90就分开了。
        */




        /**
        二、专业题
        1. javascript 的 typeof 返回哪些数据类型？
        在javascript中，typeof操作符可返回的数据类型有：“undefined”、“object”、“boolean”、“number”、“string”、“symbol”、“function”等。


        2.split()和 join() 的区别？
            1只针对字符串进行处理。split:拆分字符串、join连接字符串
            2.string.join(sep):　　以string作为分割符，将sep中所有的元素(字符串表示)合并成一个新的字符串
            3.string.split(str=' ',num=string.count(str)):　　以str为分隔，符切片string，如果num有指定值，则仅分隔num个子字符串。
            4.对导入os模块进行os.path.splie()/os.path.join() 貌似是处理机制不一样，但是功能上一样。
 
        3.事件委托是什么？
           事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，
            让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

        4. 添加 删除 替换 插入 到某个节点的方法？
            appendChild()：添加子节点到末尾
            removeChild()   删除
            replaceChild(新节点，老节点)   替换
            insertBefore(新节点，老节点)：在某个节点之前插入一个新的节点

        5．获取到页面中所有的 checkbox 怎么做（不使用第三方枢架）?
            var domList = document.getElementsByTagName(‘input’)
            var checkBoxList = [];
            var len = domList.length; //缓存到局部变量
            while (len--) { //使⽤while的效率会⽐for循环更⾼
                if (domList[len].type == ‘checkbox’) {
                    checkBoxList.push(domList[len]);
                } 
            }

        6．看下列代码输出为何？解释原因？
            var foo ="11"+2-"1";
            console . log ( foo );   //111
            console . log ( typeof foo ); // number

            "11"+2结果是112，因为是字符串和数值所以拼接 type是string，但是-“1”，使得foo转化成数字类型进行运算了 就是111  类型type是number


        8．请介绍 javascript 的splice()方法？
            splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
            arrayObject.splice(index,howmany,item1,…,itemX)
            index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
            howmany 必需。目要删除的项数量。如果设置为 0，则不会删除项目。
            item1, …, itemX 可选。向数组添加的新项目。


        9．比较 attachEvent 和     ?
            用来给对象绑定事件
            addEventListener()是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法
            addEventListener()支持事件冒泡和事件捕获; - 而attachEvent()只支持事件冒泡
            addEventListener()的第一个参数中,事件类型不需要添加on; attachEvent()需要添加’on’
            如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行, 
            attachEvent()会按照事件绑定的顺序倒序执行
        */

        //   7．已知有字符串 foo = "get-element-by-id"，写一个 function 将其转化成驼峰表示法” getElementById ”?
        var foo = "get-element-by-id";
        var arr = foo.split("-")  //split是将字符串分割为字符串数组  ['get', 'element', 'by', 'id']
        for (var i = 1; i < arr.length; i++) {
            arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
            // charAt(0) 返回每个字符串对应下标的字母 g e b i   toUpperCase() 将g e b i 转接为大写 E B I  slice(1) == lement 拼接
        }
        console.log(arr) //["get", "Element", "By", "Id"]
        var arr1 = arr.join("") //关键是join方法，将数组放入一个字符串中，默认是以逗号隔开，写了"" 字符串就是一坨
        console.log(arr1,"93") //


        // 12．编写 js 方法，找出数组 arr 中重复出现过的元素输入例子： foo ([1,2,4,4,3,3,1,5,3]). sort() 输出例子：[1,3,4]
        var arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
        var newarr = []

        arr.sort(function (a, b) {
            return a - b
        })// [1,1,2,3,3,3,4,4,5]
 
        arr.forEach((item, i) => {
            if (item == arr[i + 1]) {
                newarr.push(item)
                newarr = [...new Set(newarr)];
            }
        })

        console.log(newarr, "98") //去重 去重

        // 13．编写 js 方法，提取 url 中的参数，并以 key - value 的形式返回到一个 json 结构中。
        // 例：
        // 输入：'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'
        // 输出：{ a :'1' , b:'2',c:'', d: 'xxx' , e : undefined }
        function serilizeUrl(url) {
            var result = {};
            url = url.split("?")[1];
            var map = url.split("&");
            for (var i = 0, len = map.length; i < len; i++) {
                result[map[i].split("=")[0]] = map[i].split("=")[1];
            }
            return result;
        }
        console.log(serilizeUrl('http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'))




        // 14．请问以下代码输出的结果是什么？应该怎样使其输出0,1,2,3
        // for (var i = 0; i <= 3; i++) {
        //     setTimeout(function () {
        //         console.log(i);
        //     }, 0) 
        // }
        // //4444

        for (var i = 0; i <= 3; i++) {
            (function (a) {                //(()=>)是自动执行函数   自执行函数 (()=>{})() 或者 (()=>{}())
                setTimeout(() => {
                    console.log(a);
                }, i * 1000);     // i*1000 表示： 每隔1秒执行一次
            })(i) // i 接受外部参数
        }
        console.log(i);
 

    </script>
    <!-- 11．如图，父元素＃ content 大小未知，子元素＃ inner 宽高都为50px设置 inner 的样式，使其在＃ content 的正中央显示。(垂直水平居中)  -->
    <div class="big">
        content
        <div class="small">inner</div>
    </div>

    <!-- 10．请写出一个圆的 css 样式？ -->
    <div class="yuan"></div>
</body>
<style>
    .big {
        height: 150px;
        width: 150px;
        background-color: aqua;
        position: relative;
    }

    .big .small {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        /* top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; */

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .yuan {
        height: 150px;
        width: 150px;
        background-color: aqua;
        border-radius: 50%;
    }
</style>

</html>